* {
    padding: 0;
    margin: 0;
}
.zpb {
    width: 100%;
    height: 720px;
    background-image: url(../../day04/舆情分析平台素材/img/bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.zpbbox1 > header {
    width: 100%;
    height: 50px;
    position: relative;
    .left {
        width: 350px;
        height: 50px;
        position: absolute;
        top: 31px;
        left: 63px;
        display: flex;
        div {
            width: 80px;
            height: 40px;
            margin-right: 10px;
            line-height: 40px;
            text-align: center;
            background-image: url(../舆情分析平台素材/img/bnt.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            color: white;
            font-size: 13px;
        }
    }
    h2 {
        position: absolute;
        color: white;
        top: 7px;
        left: 705px;
    }
    .right {
        width: 350px;
        height: 50px;
        position: absolute;
        top: 31px;
        left: 1130px;
        display: flex;
        div {
            width: 80px;
            height: 40px;
            margin-right: 10px;
            line-height: 40px;
            text-align: center;
            background-image: url(../舆情分析平台素材/img/bnt.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            color: white;
            font-size: 13px;
        }
    }
}
.zpbbox2 {
    width: 95%;
    height: 600px;
    // background-color: palevioletred;
    margin: 38px auto;
    display: flex;
    justify-content: space-between;
    .zpbleft {
        width: 35%;
        height: 100%;
        // background-color: white;
        .top {
            width: 100%;
            height: 200px;
            background-image: url(../舆情分析平台素材/img/pulefttop.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-top: 5px;
            padding-top: 3px;
            .topbox1 {
                color: white;
                font-size: 12px;
                margin-left: 38px;
                margin-top: 3px;
            }
            .topbox2 {
                width: 95%;
                color: white;
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                margin-left: 10px;
                margin-top: 5px;
                margin-bottom: 5px;
            }
            .topbox3 {
                width: 95%;
                height: 150px;
                // background-color: sandybrown;
                margin-left: 10px;
                display: flex;
                justify-content: space-between;
                div {
                    width: 49%;
                    height: 96%;
                    background-color: rgba(255, 255, 255, 0.2);
                }
            }
        }
        .title {
            width: 100%;
            height: 200px;
            background-image: url(../舆情分析平台素材/img/pumiddbott.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-top: 5px;
            .topbox1 {
                color: white;
                font-size: 12px;
                margin-left: 227px;
                margin-top: 3px;
            }
            .topbox2 {
                width: 95%;
                color: white;
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                margin-left: 10px;
                margin-top: 5px;
                margin-bottom: 5px;
            }
            .topbox3 {
                width: 95%;
                height: 150px;
                // background-color: sandybrown;
                margin-left: 10px;
                display: flex;
                justify-content: space-between;
                #lefttitle {
                    width: 49%;
                    height: 96%;
                    background-color: rgba(255, 255, 255, 0.2);
                }
            }
        }
        .down {
            width: 100%;
            height: 186px;
            background-image: url(../舆情分析平台素材/img/pumiddbott.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-top: 5px;
            .topbox1 {
                color: white;
                font-size: 12px;
                margin-left: 227px;
                margin-top: 3px;
            }
            .topbox2 {
                width: 95%;
                color: white;
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                margin-left: 10px;
                margin-top: 5px;
                margin-bottom: 5px;
            }
            .topbox3 {
                width: 95%;
                height: 135px;
                // background-color: sandybrown;
                margin-left: 10px;
                display: flex;
                justify-content: space-between;
                .topbox3-1 {
                    width: 68%;
                    height: 96%;
                    background-color: rgba(255, 255, 255, 0.2);
                }
                .topbox3-2 {
                    width: 30%;
                    height: 96%;
                    background-color: rgba(255, 255, 255, 0.2);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    img {
                        width: 5px;
                        height: 10px;
                    }
                }
            }
        }
    }
    .zpbtitle {
        width: 35%;
        height: 100%;
        // background-color: pink;
        .top {
            width: 100%;
            height: 415px;
            // background-color: pink;
            display: flex;
            justify-content: space-between;
            .top1 {
                width: 49%;
                height: 100%;
                //    background-color: plum;
                background-image: url(../舆情分析平台素材/img/rbox1.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                header {
                    text-align: center;
                    font-size: 14px;
                    color: white;
                }
                .zpbtitletop {
                    width: 90%;
                    height: 88%;
                    // background-color: sandybrown;
                    margin-top: 15px;
                    margin-left: 5%;
                    display: flex;
                    flex-wrap: wrap;
                    div {
                        width: 100px;
                        height: 170px;
                        margin-left: 8px;
                        background-color: rgba(255, 255, 255, 0.2);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        img {
                            width: 13px;
                            height: 24px;
                        }
                    }
                }
            }
            .top2 {
                width: 49%;
                height: 100%;
                // background-color: sandybrown;
                background-image: url(../舆情分析平台素材/img/rbox1.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                header {
                    text-align: center;
                    font-size: 14px;
                    color: white;
                }
                .zpbtitletop2-1 {
                    width: 94%;
                    height: 60px;
                    margin-left: 3%;
                    margin-top: 5px;
                    background-color: rgba(233, 233, 233, 0.2);
                    display: flex;
                    .left {
                        width: 10%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        img {
                            width: 12px;
                            height: 12px;
                            margin-top: 13px;
                        }
                    }
                    .right {
                        width: 80%;
                        height: 100%;
                        color: rgb(223, 219, 219);
                        font-size: 12px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }
                }
                .zpbtitletop2-2 {
                    width: 94%;
                    height: 60px;
                    margin-left: 3%;
                    margin-top: 5px;
                    background-color: rgba(255, 255, 255, 0.5);
                    display: flex;
                    .left {
                        width: 10%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        img {
                            width: 12px;
                            height: 12px;
                            margin-top: 13px;
                        }
                    }
                    .right {
                        width: 80%;
                        height: 100%;
                        color: rgb(223, 219, 219);
                        font-size: 12px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    }
                }
            }
        }
        .down {
            width: 100%;
            height: 186px;
            background-image: url(../舆情分析平台素材/img/pumiddbott.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-top: 5px;
            .topbox1 {
                color: white;
                font-size: 12px;
                margin-left: 227px;
                margin-top: 3px;
            }
            .topbox2 {
                width: 95%;
                color: white;
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                margin-left: 10px;
                margin-top: 5px;
                margin-bottom: 5px;
            }
            .topbox3 {
                width: 95%;
                height: 135px;
                // background-color: sandybrown;
                margin-left: 10px;
                display: flex;
                justify-content: space-between;
                .topbox3-1 {
                    width: 68%;
                    height: 96%;
                    background-color: rgba(255, 255, 255, 0.2);
                }
                .topbox3-2 {
                    width: 30%;
                    height: 96%;
                    background-color: rgba(255, 255, 255, 0.2);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    img {
                        width: 14px;
                        height: 23px;
                    }
                }
            }
        }
    }
    .zpbright {
        width: 28%;
        height: 100%;
        // background-color: papayawhip;
        .zpbrightbox1 {
            width: 95%;
            height: 32%;
            background-image: url(../舆情分析平台素材/img/pleftbox2bott.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-top: 2%;
            header {
                text-align: center;
                color: white;
                font-size: 14px;
            }
            p {
                display: flex;
                width: 95%;
                margin-left: 2.5%;
                justify-content: space-between;
                color: white;
                font-size: 14px;
                margin-top: 7px;
            }
        }
    }
}

.zpblefttopbox3-1{
     position: relative;
     font-size: 7px;
     ul{
         .li1{
             width: 50px;
             height: 50px;
             line-height: 50px;
             border-radius: 50%;
             position: absolute;
             text-align: center;
             top: 86px;
             left: 50px;
         }
         .li2{
             width: 38px;
             height: 38px;
             line-height: 36px;
             border-radius: 50%;
             position: absolute;
             text-align: center;
             position: absolute;
             top: 86px;
             left: 140px;
         }
         .li3{
             width: 39px;
             height: 39px;
             line-height: 39px;
             border-radius: 50%;
             position: absolute;
             text-align: center;
             position: absolute;
             top: 26px;
             left: 80px;
         }
         .li4{
             width: 25px;
             height: 25px;
             line-height: 25px;
             border-radius: 50%;
             position: absolute;
             text-align: center;
             position: absolute;
             top: 33px;
             left: 140px;
         }
         .li5{
             width: 20px;
             height: 20px;
             line-height: 20px;
             border-radius: 50%;
             position: absolute;
             text-align: center;
             position: absolute;
             top: 71px;
             left: 22px;
         }
         .li6{
             width: 20px;
             height: 20px;
             line-height: 20px;
             border-radius: 50%;
             text-align: center;
             position: absolute;
             top: 25px;
             left: 30px;
         }
         .li7{
             width: 10px;
             height: 10px;
             line-height: 10px;
             border-radius: 50%;
             text-align: center;
             position: absolute;
             top: 25px;
             left: 180px;
         }
         .li8{
             width: 10px;
             height: 10px;
             line-height: 10px;
             border-radius: 50%;
             text-align: center;
             position: absolute;
             top: 125px;
             left: 25px;
         }
         .li9{
             width: 10px;
             height: 10px;
             line-height: 10px;
             border-radius: 50%;
             text-align: center;
             position: absolute;
             top: 125px;
             left: 130px;
         }
     }
}
li{
    list-style: none;
    display: block;
}